<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no;email=no" name="format-detection">
    <title>登录</title>

    <link rel="stylesheet" href="../../static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/lib/main.css">
    <link rel="stylesheet" href="../../static/css/module/header.css">
    <link rel="stylesheet" href="../../static/css/module/footer.css">
    <link rel="stylesheet" href="../../static/css/page/register.css">
</head>
<body>
    <div class="wrapper">
        <!-- 头部 -->
        <header class="hidden-xs">
            <nav class="mainnav">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                            <ul class="nav nav-pills topnav" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#">活动报名</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">楚才书店</a>
                                </li>
                                <li class="logo-item">
                                    <img src="../../static/images/logo.png" width="105" height="104" alt="logo">
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">个人中心</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">登录/注册</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <!-- 正文内容 -->
        <div class="container">
            <div class="main-content register-content">
                <div class="register">
                    <nav id="nav_register">
                        <ul class="nav nav-pills nav-justified nav-register" role="tablist">
                            <li role="presentation" class="active"><a href="javascript:"><span class="nav-item">登录</span></a></li>
                            <li role="presentation"><a href="javascript:"><span class="nav-item">注册</span></a></li>
                        </ul>
                    </nav>
                    <div class="row" id="form_register">
                        <div class="col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                            <form class="form-register text-center js-form">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="border-rt">+86</span></span>
                                        <input type="text" class="form-control" id="loginPhone" name="loginPhone" placeholder="请输入您的手机号">
                                    </div>
                                    <div class="line-alert js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的手机号</div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon input-group-icon"><i class="glyphicon glyphicon-lock border-rt"></i></span>
                                        <input type="password" class="form-control ipt-eye" id="loginPwd" name="loginPwd" placeholder="请输入您的密码">
                                        <input type="text" class="form-control ipt-eye" id="loginPwd" name="loginPwd" placeholder="请输入您的密码" style="display: none;">
                                        <span class="input-group-addon input-group-eye"><i class="glyphicon glyphicon-eye-open js-eye-open"></i></span>
                                    </div>
                                    <div class="line-alert js-line-alert"><i class="glyphicon glyphicon-info-sign"></i><span class="js-alert-text">请输入正确的密码</span></div>
                                </div>
                                <div class="form-group form-group--forget">
                                    <a href="#" class="forgot-password pull-right">忘记密码?</a>
                                </div>
                                <div class="btn-groups btn-groups--login">
                                    <button class="btn btn-submit col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1" id="loginBtn" type="button">登录</button>
                                </div>
                            </form>
                            <form class="form-register text-center form--multi js-form" style="display: none">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="border-rt">+86</span></span>
                                        <input type="text" class="form-control" name="username" placeholder="请输入您的手机号">
                                    </div>
                                    <div class="line-alert js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的手机号</div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon input-group-icon"><i class="glyphicon glyphicon-plus-sign border-rt"></i></span>
                                        <input type="text" class="form-control" name="password" placeholder="请输入您的验证码">
                                        <span class="input-group-addon send-code"><a class="send-btn" href="#">发送验证码</a></span>
                                    </div>
                                    <div class="line-alert js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的验证码</div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon input-group-icon"><i class="glyphicon glyphicon-lock border-rt"></i></span>
                                        <input type="password" class="form-control ipt-eye" name="password" placeholder="请输入您的密码">
                                        <input type="text" class="form-control ipt-eye" name="password" placeholder="请输入您的密码" style="display: none;">
                                        <span class="input-group-addon input-group-eye"><i class="glyphicon glyphicon-eye-open js-eye-open"></i></span>
                                    </div>
                                    <div class="line-alert js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的密码</div>
                                </div>
                                <div class="btn-groups btn-groups--register">
                                    <button class="btn btn-submit btn-register col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1" id="registerBtn" type="button">注册</button>
                                </div>
                                <div class="notice-register">
                                    <label>
                                        <input type="checkbox" checked>
                                        我已阅读并同意<a href="agreement.html">《楚才用户使用协议》</a>
                                    </label>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="logo-bottom visible-xs text-center">
                    <img src="../../static/images/bluelogo_cjrb.png" width="136" height="42" alt="cjrbLogo">
                </div>
                <span class="star"><img src="../../static/images/star.png" alt="star"></span>
                <span class="child"><img src="../../static/images/child.png" alt="child"></span>
                <span class="planet visible-xs"><img src="../../static/images/planet.png" alt="planet"></span>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    版权所有 武汉楚才竞赛网 鄂ICP备14016248号COPYRIGHT @2013-2014 CHUCAI.GNJ.CN ALL RIGHT RESERVED
                    <img src="../../static/images/logo_cjrb.png" width="136" height="42" alt="cjrbLogo">
                </div>
            </div>
        </div>
    </footer>

    <script src="../../static/js/lib/jquery-1.9.1.min.js"></script>
    <script src="../../static/js/lib/bootstrap.min.js"></script>
    <script src="../../static/js/module/validate.js"></script>
    <script>
        $(function(){
           $("#nav_register").on("click", "li", function(){
               var index = $(this).index();

               $(this).addClass("active").siblings().removeClass("active");
               $("#form_register").find(".js-form").eq(index).show().siblings().hide();
           });

        /*var $phone = $("#phone");

           $phone.on("onreadystatechange input blur", validateForm);
           $("#loginBtn").on("click", validateForm);

           function validateForm(){
               var phone = $.trim($phone.val());
               var $addon = $phone.prev(".input-group-addon");
               var $alert = $phone.closest(".form-group").find(".js-line-alert");

               if(phone.length == 0){
                   $addon.addClass("border-error");
                   $phone.addClass("input-error border-error");
                   $alert.show();
               }
               else{
                   $addon.removeClass("border-error");
                   $phone.removeClass("input-error border-error");
                   $alert.hide();
               }
           }

            //修改密码时查看明文
            $(".js-eye-open").on("click", lookPwd);

            function lookPwd(){
                var $pwd = $(this).closest(".input-group").find("input[type='password']");
                var $pwd_show = $pwd.next("input[type='text']");
                var pwd = $pwd.val();
                var pwd_show = $pwd_show.val();

                if($pwd.is(":visible")){
                    $pwd.hide();
                    $pwd_show.val(pwd).show();
                }
                else{
                    $pwd.val(pwd_show).show();
                    $pwd_show.hide();
                }
            }*/
        });
    </script>
</body>
</html>